<template>
    <Maximize v-show="maximize" />
    <Tabs v-show="tabs" />
    <el-main>
        <router-view v-slot="{ Component, route }">
            <transition appear name="fade-transform" mode="out-in">
                <keep-alive :include="keepAliveName">
                    <component
                        :is="createComponentWrapper(Component, route)"
                        v-if="isRouterShow"
                        :key="route.fullPath"
                    />
                </keep-alive>
            </transition>
        </router-view>
    </el-main>
    <el-footer v-show="footer">
        <Footer />
    </el-footer>
</template>

<script setup >
import { ref, onBeforeUnmount, provide, watch, h } from "vue"
import { storeToRefs } from "pinia"
import { useDebounceFn } from "@vueuse/core"
import { useGlobalStore } from "@/store/modules/global"
import { useKeepAliveStore } from "@/store/modules/keepAlive"
import Maximize from "./components/Maximize.vue"
import Tabs from "@/layouts/components/Tabs/index.vue"
import Footer from "@/layouts/components/Footer/index.vue"

const globalStore = useGlobalStore()
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore)

const keepAliveStore = useKeepAliveStore()
const { keepAliveName } = storeToRefs(keepAliveStore)

// 注入刷新页面方法
const isRouterShow = ref(true)
const refreshCurrentPage = (val) => (isRouterShow.value = val)
provide("refresh", refreshCurrentPage)

// 解决详情页 keep-alive 问题
const wrapperMap = new Map()
function createComponentWrapper (component, route) {
    if (!component) return
    const wrapperName = route.fullPath
    let wrapper = wrapperMap.get(wrapperName)
    if (!wrapper) {
        wrapper = { name: wrapperName, render: () => h(component) }
        wrapperMap.set(wrapperName, wrapper)
    }
    return h(wrapper)
}

// 监听当前页面是否最大化，动态添加 class
watch(
    () => maximize.value,
    () => {
        const app = document.getElementById("app")
        if (maximize.value) app.classList.add("main-maximize")
        else app.classList.remove("main-maximize")
    },
    { immediate: true }
)

// 监听布局变化，在 body 上添加相对应的 layout class
watch(
    () => layout.value,
    () => {
        const body = document.body
        body.setAttribute("class", layout.value)
    },
    { immediate: true }
)

// 监听窗口大小变化，折叠侧边栏
const screenWidth = ref(0)
const listeningWindow = useDebounceFn(() => {
    screenWidth.value = document.body.clientWidth
    if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true)
    if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false)
}, 100)
window.addEventListener("resize", listeningWindow, false)
onBeforeUnmount(() => {
    window.removeEventListener("resize", listeningWindow)
});
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
